<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<meta content="telephone=no" name="format-detection" /> 
	<title>api</title>
	<link rel="stylesheet" type="text/css" href="../css/api.css" />

	<link rel="stylesheet" type="text/css" href="../css/base.css" />
	<link rel="stylesheet" type="text/css" href="../css/classifyList.css" />
	<style>
	body{
    font-family: arial;
    
    min-width: 300px;
    max-width: 640px;
    margin: 0 auto;
    background-color: #f2f2f2; font-size: 14px;
    
    
}
	.jqm-header-search-wrapper{
		width: 100%;
    	overflow: hidden;
    	z-index: 28;
	}
	.jqm-search-container{
		min-width: 320px;
	    max-width: 640px;
	    margin: 0 auto;
	    z-index: 10;
	    width: 100%;
	}
	.on-focus{
		display: block!important;
    	border-bottom: solid 1px;
    	border-image: url() 2 0 round;
	}
	.on-focus .jqm-search-box-cover {
    	background: #efefef;
    	position: absolute;
	}
	.jqm-search-box-cover {
    	width: 100%;
   		height: 44px;
    	top: 0;
	    min-width: 320px;
	    max-width: 640px;
	    margin: 0 auto;
	}
	.jqm-search-container .jqm-search-box {
	    position: relative;
	    width: 100%;
	    height: 44px;
	}
	.jqm-search-box .jqm-search-tb {
	    margin: 0 10px;
	    height: 100%;
	    line-height: 44px;
	}
	.jqm-search-tb .jqm-search-icon {
	    display: inline-block;
	    height: 100%;
	    overflow: hidden;
	    position: absolute;
	    left: 10px;
	}
	.jqm-search-icon-cancel {
	    margin-top: 8px;
	    display: inline-block;
	}
	.jqm-search-icon-cancel i {
	    display: inline-block;
	    width: 23px;
	    height: 23px;
	   
	}
	.jqm-sprite-icon {
	    display: block;
	    background: url(../image/close.png) no-repeat;
	    background-size: 23px 23px;
	}
	.on-focus .jqm-search-form {
	    margin-left: 30px;
	    padding-right: 30px;
	}
	.jqm-search-tb .jqm-search-form {
	    display: inline-block;
	    height: 100%;
	    width: 100%;
	}
	.on-focus .jqm-search-form-input {
	    background: #fff;
	    display: block;
	    margin-top: 8px;
	    width: 100%;
	    border-radius: 8px;
	    overflow: hidden;
	    font-size: 12px;
	    border: 1px solid #bfbfbf;
	    height: 30px;
	    /*border-right: 0;*/
	}
	.jqm-search-form-input {
	    height: 100%;
	    display: inline-block;
	    width: 80%;
	}
	.on-focus .jqm-search-form-input input {
    	margin-left: 8px;
	}
	.jqm-search-form-input input {
	    border: 0;
	    display: inline-block;
	    background: 0;
	    font-size: 13px;
	    line-height: 1.2em;
	    height: 1.2em;
	    width: 100%;
	    vertical-align: middle;
	    margin-top: -15px;
	    color: #666;
	}
	.on-focus .jqm-search-form-action {
    	display: inline-block;
	}

	.jqm-search-form-action {
	    position: absolute;
	    right: 10px;
	    width: 30px;
	    height: 30px;
	    top: 8px;
	    border-radius: 6px;
	    /* border: 1px solid #bfbfbf; */
	}
	.jqm-search-form-action span {
	    width: 25px;
	    height: 25px;
	    margin: 5px 0 0 5px;
	}
	.jqm-s-icon {
	    display: block;
	    background: url(../image/soso.png) no-repeat;
	    background-size: 18px 18px;
		}
		.jqm-s2-icon {
	    display: block;
	    background: url(../image/cart.png) no-repeat;
	    background-size: 22px 22px;
		}
		.on-focus .jqm-search-form-box {
    		margin-right: 70px;
		}
		.jqm-search-box .jqm-search-tb {
		    margin: 0 10px;
		    height: 100%;
		    line-height: 44px;
		}
		.search-land {
			color: rgb(132, 134, 137);
    		background-color: rgb(255, 255, 255);
		}
		.recent-search, .hot-search {
		    padding-left: 15px;
		}
		.recent-search-head, .hot-search-head {
    		padding: 10px 15px 10px 0px;
		}
		.recent-search-head p, .hot-search-head p {
		        float: left;
    line-height: 18px;
		}
		.sh {
    margin-right: 2px;
    height: 16px;
    width: 16px;
    float: left;
    background: url("") center center no-repeat;
    background-size: contain;
}
	.hot-search-tags {
    padding-right: 2px;
    overflow: hidden;
    font-size: 0.75rem;
    text-align: center;
}
.hot-search {
    padding-left: 15px;
}
.hot-search-tags span {
    display: block;
    width: 33%;
    overflow: hidden;
 
    padding-bottom: 7px;
    float: left;
}
.cf::after {
    content: "";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
}
.hot-search-tags a {
    height: 1.5625rem;
    line-height: 1.5rem;
    border-radius: 1.5625rem;
    display: block;
    width: 77%;
    color: rgb(132, 134, 137);
    border: 1px solid rgb(224, 224, 224);
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-left: 7px;
    padding-right: 7px;
    overflow: hidden;
    background-color: rgb(255, 255, 255);
}
em, i {
    text-decoration: none;
    font-style: normal;
}
#header{
	position: fixed;
			left: 0;
			right: 0;
			top: 0;
			z-index: 5;
	 background-color: #fff; 
	
}
.gray{
    color: #999;
}
.right{
    float: right;
}
#cartNum {
font-style: italic;
    position: absolute;
    width: 12px;
    height: 12px;
    line-height: 12px;
    border-radius: 10px;
    background-color: #fff;
    font-size: 12px;
    top: 5px;
    right: 6px;
    background:#ff0000;
    color: #fff;
    border: 1px solid #FF0000;
    text-align: center;
}
	</style>
	
</head>
<body style="background: #fff;">
<header>
	<div id="header" class='jqm-header-search-wrapper'>
		<div class="jqm-search-container on-focus">
			<div class="jqm-search-box-cover" style="opacity: 0;"></div>
			<div class="jqm-search-box">
				<div class="jqm-search-tb">
					<div onclick="api.closeWin()" class="jqm-search-icon">
					   
						<span id="index_search_bar_cancel" class="jqm-search-icon-cancel"><i class="jqm-sprite-icon"></i></span>
						
					</div>
					<form class="jqm-search-form" id="index_searchForm">
					<div class="jqm-search-form-box">
					<div class="jqm-search-form-input">
							<input id="search-input" onfocus="search_change()" type="text" maxlength="20" autocomplete="off" id="index_newkeyword" name="keyword" value="" placeholder="搜一下，收获惊喜！" class="hilight1">
						</div>
						<a href="javascript:void(0)"  onclick="search_submit()" id="index_search_submit" class="jqm-search-form-action"><span id='so-icon' class="jqm-s-icon"></span></a>
						<div onclick = "backCart()"  id="index_search2_submit" style="display: none">
						<a href="javascript:void(0)"   class="jqm-search-form-action"><span id='so-icon' class="jqm-s2-icon"></span></a>
						<div style="display: none" id='cartNum'></div>
						</div>
					</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</header>
<section >
	<div id="search_land_searchland" style="margin-top:45px;" class="search-land">
		<section>
			<div id="searchland1" class="hot-search">
				<header class="recent-search-head cf">
					<i class="sh"></i>
					<p>热门搜索</p>
				</header>
				<div id="searchland5" class="hot-search-tags">
					<span data-value='iphone'><a href="javascript:void(0);" data='iphone' ><i>iphone</i></a></span>
					<span data-value='ipad'><a href="javascript:void(0);" data='ipad' ><i>ipad</i></a></span>
					<span data-value='电脑'><a href="javascript:void(0);" data='电脑' ><i>电脑</i></a></span>
					<span data-value='相机'><a href="javascript:void(0);" data='相机' ><i>相机</i></a></span>
					<span data-value='手表'><a href="javascript:void(0);" data='手表' ><i>手表</i></a></span>
					<span data-value='包'><a href="javascript:void(0);" data='包'><i>包</i></a></span>		
				</div>
		</section>
	</div>
	<section >
		<script id="class-template" type="text/x-dot-template">
		{{if(it==''){}}
		<div style="text-align: center;margin-top: 200px"><p>没有找到相关词汇的商品</p></div>
		{{}else{}}
			{{ for(var i=0; i< it.length; i++) { }}
			<dd class="detail-item" >
			<div class="detail-img" onclick="openGoodsDetail({{=it[i].id}})" >
			<img src="http://wap.jqmao.cn/statics/uploads/{{=it[i].thumb}}" width="82px" height="82px">
			</div>
			<div class="detail-content" onclick="openGoodsDetail({{=it[i].id}})" >
			<div class="detail-title">
			<p>{{=it[i].title}}</p>
			</div>
			<div class="w-progressBar">
			<p class="wrap">
			<span class="bar" style="width:{{=it[i].sengbi}}%;"> <i class="color"></i>
			</span>
			</p>
			<span class="txt aggregate gray">
			总需{{=it[i].zongrenshu}}
			</span>
			<span class="txt right gray">
			剩余{{=it[i].zongrenshu-=it[i].canyurenshu}}
			</span>
			</div>
			</div>
			<div class="add-button ">
			<button onclick="addCart({{=it[i].id}})" class="red">加入清单</button>
			</div>
			{{}}}
			{{}}}
		</script>
		<div style='margin-top:45px;' id='classifyList'>
			<div id='list_detail'>
				<dl id='class-content'>
					
				</dl>
			</div>
		</div>
	</section>
</section>
	
	
</body>
	
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/common.js"></script>
	<script type="text/javascript" src="../script/doT.min.js"></script>

	<script type="text/javascript">
	var data_value = '';
	function changeNum() {
	var cartNum = $api.getStorage("cartNum");
	var cartNumtxt = $api.byId('cartNum');

	if (cartNum) {

		if (cartNum != 0) {
			$api.css(cartNumtxt, 'display:block')
			$api.html(cartNumtxt, cartNum);
		} else {
			$api.css(cartNumtxt, 'display:none')
			$api.html(cartNumtxt, cartNum);
		}

	}
}
function search_change(){
	var search_land_searchland =$api.byId('search_land_searchland');
	$api.css(search_land_searchland,'display:block');
	var content = $api.byId('class-content');
	$api.css(content,'display:none');
	var so_icon = $api.byId('index_search_submit');
		var so2_icon = $api.byId('index_search2_submit');
		$api.css(so_icon,'display:block');
		$api.css(so2_icon,'display:none');
}

		apiready = function(){
		var cartNumtxt = $api.byId('cartNum');
		$api.html(cartNumtxt);
		changeNum();
		if(headerstatus()){
			var search_land_searchland = $api.byId('search_land_searchland');
			var classifyList = $api.byId('classifyList');
			$api.css(search_land_searchland,'margin-top:65px;');
			$api.css(classifyList,'margin-top:65px;');
		}
			var searchland5 = $api.byId('searchland5');
			$api.addEvt(searchland5, 'click', function(e){
				if(e.target.tagName.toLowerCase()=='i'){
					data_value = e.target.innerHTML;
					
				}else if(e.target.tagName.toLowerCase()=='a'){
					data_value = e.target.getAttribute("data");		
				}
				var input = $api.byId('search-input');
				$api.val(input,''+data_value)
				
			});
			
		}
		function search_submit(){
		
	
		var so_icon = $api.byId('index_search_submit');
		var so2_icon = $api.byId('index_search2_submit');
		$api.css(so_icon,'display:none');
		$api.css(so2_icon,'display:block');
		
		var input = $api.byId('search-input');
		var data_value = $api.val(input);
		//alert(data_value);
			if(data_value!=''){
				api.ajax({
			            url:'http://wap.jqmao.cn/search_submit?search_value='+data_value
		            },function(ret,err){
		            	//coding...
		            	if(ret){
		            		var search_land_searchland =$api.byId('search_land_searchland');
		            		$api.css(search_land_searchland,'display:none');
		            		//alert(JSON.stringify(ret))
		            		var content = $api.byId('class-content');
		            		$api.css(content,'display:block');
							var tpl = $api.byId('class-template').text;
							var tempFn = doT.template(tpl);
							$api.html(content, tempFn(ret));
		            	}else{
		            		//alert(JSON.stringify(err))
		            	}
		            	
		            });
			}else{
				toast('搜索内容不为空')
			}
			
		}
	</script>

</html>